<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <!-- 顶部 搜索 banner -->
      <view>
        <u-navbar :is-back="true" :background="background" :border-bottom="false" title="基金明细">
        </u-navbar>

        <view class="content">
          <view class="active-box">
            <view class="active-item">
              <view class="check-date" @click="showPicker = !showPicker">
                <text style="margin-right: 10rpx">{{ time.year }}年{{ time.month }}月</text>
                <u-icon name="arrow-down" color="#333333" size="28"></u-icon>
                <text class="month-count">入账：¥8000.00</text>
                <text class="month-count">支出：¥5000.00</text>
              </view>
              <u-picker
                mode="time"
                v-model="showPicker"
                @confirm="confirmDate"
                :params="params"
              ></u-picker>
            </view>
            <view
              class="active-item dis-flex flex-y-between"
              v-for="(item, index) in itemList"
              :key="index"
            >
              <view class="item-detai">
                <view class="title oneline-hide-1">{{ item.title }}</view>
                <view class="date">{{ item.date }}</view>
              </view>
              <view class="item-detai" style="text-align: right">
                <view class="price" v-if="item.type == 1">+{{ item.price }}</view>
                <view class="price sub" v-else>-{{ item.price }}</view>
                <view class="sy-price">总额：¥2000</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      date: '',
      itemList: [
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06',
          type: 1
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06'
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06',
          type: 1
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06'
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06'
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06',
          type: 1
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06',
          type: 1
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06',
          type: 1
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06',
          type: 1
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06'
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06'
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06'
        },
        {
          id: 1,
          price: '0.07',
          title: '分账流水贡献',
          date: '2024-03-06'
        }
      ],
      background: {
        background: '#fff'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      },
      showPicker: false,
      time: {
        year: '',
        month: ''
      }
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  onLoad() {
    this.getMonth()
  },
  methods: {
    getMonth() {
      let now = new Date(),
        end
      end = this.$utils.parseTime(now)
      this.today = end.substring(0, 7)
      this.time.year = now.getFullYear()
      this.time.month = now.getMonth() + 1
    },
    confirmDate(res) {
      this.today = res.year + '-' + res.month
    },
    queryList() {},
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 400rpx;
}

.content {
  position: relative;
  padding: 20rpx;

  .active-box {
    padding: 0 20rpx;
    background: #ffffff;
    width: 100%;

    .active-item:last-child {
      border: none;
    }

    .active-item {
      padding: 26rpx 0;
      box-sizing: border-box;
      border-bottom: 2rpx solid #f5f5f5;
      width: 100%;

      .check-date {
        font-size: 30rpx;
        color: #333333;
        .month-count {
          font-size: 26rpx;
          color: #999999;
          margin-left: 25rpx;
        }
      }

      .count-price {
        font-size: 26rpx;
        color: #999999;

        .rule {
          font-size: 24rpx;
          margin-left: 10rpx;
        }
      }

      .item-detai {
        flex: 1;

        .title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 20rpx;
        }

        .date {
          font-size: 24rpx;
          color: #999999;
        }
        .price {
          font-weight: 500;
          font-size: 30rpx;
          color: #10a28f;
          margin-bottom: 18rpx;
        }
        .sub {
          color: #333333;
        }
        .sy-price {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}
</style>
